<template>
	<view class="safe-area">
		<view class="tongue-diagnosis">
			<!-- 背景动画效果 -->
			<view class="animated-background">
				<view class="circle circle-1"></view>
				<view class="circle circle-2"></view>
				<view class="circle circle-3"></view>
			</view>

			<!-- 顶部标题区域 -->
			<view class="header">
				<text class="title">智能舌诊</text>
				<text class="subtitle">AI · 中医智慧 · 即刻诊断</text>
				<view class="header-decoration">
					<view class="dot"></view>
				</view>
			</view>

			<!-- 上传区域 -->
			<view class="upload-section">
				<view class="upload-box" @tap="chooseImage">
					<view class="upload-inner">
						<view class="upload-icon-wrapper">
							<image class="upload-icon" src="@/static/upload.png" mode="aspectFit"></image>
							<view class="upload-icon-ring"></view>
						</view>
						<text class="upload-text">点击上传舌苔照片</text>
						<text class="upload-tip">请在明亮环境下清晰的舌头照片</text>
						<view class="upload-features">
							<view class="feature-item">
								<text class="feature-icon">📸</text>
								<text class="feature-text">高清拍摄</text>
							</view>
							<view class="feature-item">
								<text class="feature-icon">🤖</text>
								<text class="feature-text">AI 分析</text>
							</view>
							<view class="feature-item">
								<text class="feature-icon">⚡️</text>
								<text class="feature-text">即时诊断</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request.js'

	// 选择图片
	const chooseImage = async () => {
		try {
			// 获取图片、从摄像头or相册
			const res = await uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['camera', 'album']
			})

			uni.showToast({
				title: '上传中...',
				icon: 'none'
			})
			// 上传图片到后端
			const imageUrl = await request.uploadFile(res.tempFilePaths[0])
			uni.hideLoading()

			// 跳转到诊断结果界面
			uni.navigateTo({
				url: `/pages/tongue/DiagnosisResult`,
				success: function(res) {
					res.eventChannel.emit('acceptDataFromOpenerPage', {
						url: imageUrl.data
					})
				}
			})

		} catch (e) {
			uni.showToast({
				title: e || '上传图片失败',
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	}

	defineOptions({
		navigationStyle: 'custom'
	})
</script>

<style scoped lang="scss">
	// 使用 CSS 变量定义常用颜色和尺寸
	:root {
		--primary-color: #e53935;
		--secondary-color: #18ff00;
		--tertiary-color: #1565c0;
		--quaternary-color: #2e7d32;
		--border-radius: 24rpx;
		--transition-duration: 0.3s;
	}

	.safe-area {
		padding-top: var(--status-bar-height);
		min-height: 100vh;
		background: linear-gradient(135deg, #f8f9fa 0%, #e8f4f8 50%, #edf7ed 100%);
	}

	.tongue-diagnosis {
		min-height: calc(100vh - var(--status-bar-height));
		padding: 30rpx;
		position: relative;
		overflow: hidden;
	}

	// 背景动画
	.animated-background {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		overflow: hidden;

		.circle {
			position: absolute;
			border-radius: 50%;
			opacity: 0.1;

			&-1 {
				width: 600rpx;
				height: 600rpx;
				background: linear-gradient(45deg, #ff6b6b 0%, #f06292 100%);
				top: -200rpx;
				right: -200rpx;
				animation: float 15s infinite;
				opacity: 0.08;
			}

			&-2 {
				width: 400rpx;
				height: 400rpx;
				background: linear-gradient(45deg, #4fc3f7 0%, #4dd0e1 100%);
				bottom: -100rpx;
				left: -100rpx;
				animation: float 20s infinite reverse;
				opacity: 0.08;
			}

			&-3 {
				width: 300rpx;
				height: 300rpx;
				background: linear-gradient(45deg, #81c784 0%, #4db6ac 100%);
				top: 40%;
				right: -50rpx;
				animation: float 25s infinite;
				opacity: 0.08;
			}
		}
	}

	.header {
		position: relative;
		z-index: 1;
		text-align: center;
		margin-bottom: 60rpx;


		.title {
			font-size: 56rpx;
			font-weight: 800;
			background: linear-gradient(45deg, #35e5e5, #4aaa24);
			-webkit-background-clip: text;
			color: transparent;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		}

		.subtitle {
			font-size: 28rpx;
			color: #34495e;
			font-weight: 500;
			margin-top: 16rpx;
			display: block;
		}
	}

	.upload-section {
		position: relative;
		z-index: 1;
		margin: 40rpx 0;

		.upload-box {
			background: rgba(255, 255, 255, 0.9);
			border-radius: 30rpx;
			padding: 60rpx 40rpx;
			backdrop-filter: blur(10px);
			box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
			transform: translateY(0);
			transition: all 0.3s ease;

			&:active {
				transform: translateY(6rpx);
				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
			}

			.upload-inner {
				text-align: center;

				.upload-icon-wrapper {
					position: relative;
					width: 160rpx;
					height: 160rpx;
					margin: 0 auto 30rpx;

					.upload-icon {
						width: 100%;
						height: 100%;
						position: relative;
						z-index: 2;
					}

					.upload-icon-ring {
						position: absolute;
						top: -10rpx;
						left: -10rpx;
						right: -10rpx;
						bottom: -10rpx;
						border: 4rpx dashed #36d1dc;
						border-radius: 50%;
						animation: rotate 10s linear infinite;
					}
				}

				.upload-text {
					font-size: 36rpx;
					font-weight: bold;
					color: #1a237e;
					margin-bottom: 20rpx;
					display: block;
				}

				.upload-tip {
					font-size: 24rpx;
					color: #455a64;
					margin-bottom: 40rpx;
					display: block;
				}

				.upload-features {
					display: flex;
					justify-content: space-around;
					margin-top: 40rpx;

					.feature-item {
						text-align: center;

						.feature-icon {
							font-size: 40rpx;
							margin-bottom: 10rpx;
							display: block;
						}

						.feature-text {
							font-size: 24rpx;
							color: #37474f;
							font-weight: 500;
						}
					}
				}
			}
		}
	}

	// 动画
	@keyframes float {

		0%,
		100% {
			transform: translate(0, 0);
		}

		50% {
			transform: translate(-30rpx, -30rpx);
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>